<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TalkBer注册</title>
    <!-- Vue文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入自定义js -->
    <script src="./js/registry.js"></script>
    <script src="commons/js/common.js"></script>
    <!-- 引入自定义css -->
    <link rel="stylesheet" href="./css/registry.css">
    <link rel="stylesheet" href="commons/css/common.css">

</head>
<body>
    <div id="app">
        <el-container>
            <header th:replace="common/header::header"></header>
            <!-- 注册主体 -->
            <el-main>
                <i class="el-icon-d-arrow-left back" onclick="history.go(-1)"></i>
                <el-image src="./image/logo.png"></el-image>
                <el-form :model="form" :rules="rules" status-icon ref="form" label-width="80px">
                    <el-form-item label="昵称" prop="nickname" required >
                        <el-input v-model="form.nickname" type="text" placeholder="请输入昵称" autofocus maxlength="16"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phoneNumber" required>
                        <el-input v-model="form.phoneNumber" type="text" placeholder="请输入手机号" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" required>
                        <el-input v-model="form.email" type="text" placeholder="请输入邮箱,用来找回密码" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex" required>
                        <el-radio-group v-model="form.sex">
                          <el-radio :label="0" border >男</el-radio>
                          <el-radio :label="1" border >女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" required>
                        <el-input v-model="form.password" type="password" placeholder="请输入密码" maxlength="16" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="q_password" required>
                        <el-input v-model="form.q_password" type="password" placeholder="请确认密码" maxlength="16" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="400px" @click="submitForm('form')">提交</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
            <!-- 注册主体 -->
           <footer th:replace="common/footer::footer"></footer>
        </el-container>
    </div>
</body>
</html>